<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        保养工单详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style media="print">
        .none {
            display: block;
        }
    </style>
    <style>
        .none {
            display: none;
        }
        
        .layui-table-page select {
            height: 22px;
        }
        
        #container {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="layui-tab-content">
        <h2>工单详情</h2>

        <div class="modal-body" id="app">
            <div class="row" style="background: #fff;">
                <div class="col-xs-6">

                    <div class="box-body with-border">
                        <ul style="line-height:28px;padding-left: 15px;" class="orderInfo">
                            <li>
                                <h3>电梯信息</h3>
                                <ul>
                                    <li>使用单位：{{companyname}}</li>
                                    <li>项目名称：{{projectname}}</li>
                                    <li>电梯位置：{{address}}</li>
                                </ul>
                            </li>
                            <li>
                                <h3>保养信息</h3>
                                <ul>
                                    <li>工单编号：{{numbercode}}</li>
                                    <li>维保人员： <span class="label label-success" title="18330595992" data-id="v.id">{{person}}</span>
                                    </li>
                                    <li>保养类型：{{maintype}}</li>
                                    <li>备注信息：{{remark}}</li>
                                </ul>
                            </li>
                        </ul>
                        <div id="logsDetailes">
                            <ul class="nav nav-tabs" id="logsStaff">
                                <li class="active"><a data-toggle="tab">{{person}}</a>
                                </li>

                            </ul>
                            <div class="tab-content" style="max-height: 240px;overflow: auto">
                                <div class="tab-pane active" id="logsList">
                                    <p id="staffStatus">状态：{{status}}，耗时： <span class="label label-badge label-info ">{{timeConsuming}}</span></p>
                                    <table class="table table-bordered" style="text-align:center;margin: 10px 0">
                                        <thead>
                                            <tr>
                                                <th nowrap="nowrap" style="text-align:center">状态</th>
                                                <th nowrap="nowrap" style="text-align:center">时间</th>
                                                <th nowrap="nowrap" style="text-align:center">操作位置</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-if="startTime != null">
                                                <th style="text-align:center;vertical-align: middle;">开始保养</th>
                                                <td nowrap="nowrap" style="vertical-align: middle;">{{startTime}}</td>
                                                <td style="max-width:210px;" align="left">{{startAddress}}

                                                </td>
                                            </tr>
                                            <tr v-if="endTime != null">
                                                <th style="text-align:center;vertical-align: middle;">结束保养</th>
                                                <td nowrap="nowrap" style="vertical-align: middle;">{{endTime}}</td>
                                                <td style="max-width:210px;" align="left">{{endAddress}}

                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1" data-toggle="tab" id="mapInfo">位置信息</a></li>
                            <li><a href="#tab_2" data-toggle="tab">图片信息 <span data-val="all"
                                                                          class="label label-badge count">{{photoNum}}</span></a>
                            </li>
                            <li><a href="#tab_3" data-toggle="tab">保养项目</a></li>
                            <li><a href="#tab_4" data-toggle="tab">电梯信息 </a></li>
                            <!-- <li><a href="#tab_5" data-toggle="tab">更换配件 </a></li>-->
                        </ul>
                        <div class="tab-content" style="padding: 0;">
                            <div class="tab-pane active" id="tab_1">
                                <p style="color: #666666;margin: 10px 0;">提示：如果没有电梯位置标识，请及时进行电梯定位操作。</p>
                                <div id="mapBox" style="height: 420px; position: relative; background: rgb(252, 249, 242);">
                                    <div id="container"></div>
                                </div>

                            </div>

                            <div class="tab-pane" id="tab_2" style="height: 460px;padding-top: 5px">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#imageBox1" data-toggle="tab" id="imageFirst">现场照片 <span
                                        data-val="xcCount"
                                        class="label label-badge count">{{maintenancePhotoNum}}</span></a>
                                    </li>
                                    <li><a href="#imageBox2" data-toggle="tab">工单照片
                                    <span data-val="gdCount" class="label label-badge count">{{workOrderPhotoNum}}</span></a></li>
                                    <li><a href="#imageBox3" data-toggle="tab">电子工单照片
                                    <span data-val="signCount" class="label label-badge count">{{electronPhotoNum}}</span></a></li>

                                </ul>
                                <div class="tab-content" style="max-height: 430px;padding-top: 10px">
                                    <div class="tab-pane active" id="imageBox1">
                                        保养前：

                                        <div v-for="image in picturesBeforeMaintenanceList">
                                            <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt="" class="layui-upload-img" onclick="previewImg(this)">
                                        </div>
                                        保养后：

                                        <div v-for="image in picturesAfterMaintenanceList">
                                            <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt="" class="layui-upload-img" onclick="previewImg(this)">
                                        </div>


                                    </div>
                                    <div class="tab-pane" id="imageBox2">
                                        <div v-for="image in workOrderPhotoList">
                                            <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt="" class="layui-upload-img" onclick="previewImg(this)">
                                        </div>
                                    </div>
                                    <div class="tab-pane " id="imageBox3">
                                        <div v-for="image in electronPhotoList">
                                            <img :src="bindSrcBillAttachment(image)" width="200" height="200" alt="" class="layui-upload-img" onclick="previewImg(this)">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="tab_3" style="height: 460px;overflow: auto;">
                                <table class="table table-bordered table-condensed table-hover" width="100%" style="margin-top: 10px;position: relative;">
                                    <thead>
                                        <tr>
                                            <th nowrap="nowrap" style="width: 25%;text-align: center">项目</th>
                                            <th nowrap="nowrap" style="width: 30%;text-align: center">要求</th>
                                            <th nowrap="nowrap" style="width: 10%;text-align: center">结果</th>
                                            <th nowrap="nowrap" style="width: 20%;text-align: center">原因</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="program in programList">
                                            <td align="center">{{program.program}}</td>
                                            <td align="center">{{program.requirement}}</td>
                                            <td align="center">{{program.record}}</td>
                                            <td align="center"><span class="">{{program.reason}}</span></td>
                                        </tr>
                                    </tbody>
                                </table>

                                <span class="print_btn" @click='print'>打印</span>

                                <div id="print_area" class="none" media="print">
                                    <h2>{{maintype}}保养项目内容及要求（保养工单）</h2>
                                    <div>项目名称：{{projectname}}&nbsp;&nbsp;&nbsp;&nbsp; 电梯位置：{{address}} </div>
                                    <ul class="ul_box">
                                        <li id="first_li">
                                            <span>序号</span>
                                            <span>维护保养项目（内容）</span>
                                            <span>维护保养基本要求</span>
                                            <span>结果</span>
                                            <span>备注</span>
                                        </li>
                                        <li v-for='(item,index) in programList'>
                                            <span>{{index+1}}</span>
                                            <span>{{item.program}}</span>
                                            <span>{{item.requirement}}</span>
                                            <span>{{item.record=='正常'?'√':'×'}}</span>
                                            <span>{{item.reason}}</span>
                                        </li>
                                    </ul>
                                    <div>说明：表格中维保结果打 “√” 为正常，“×” 为异常</div>
                                    <div>备注：{{remark}}</div>
                                    <div>维保单位：安徽共团建筑工程有限公司</div>
                                    <div>维保时间：{{startTime}} &nbsp;&nbsp;&nbsp;&nbsp;维保时长：{{timeConsuming}} &nbsp;&nbsp;&nbsp;&nbsp; 维保人员：{{person}}</div>
                                </div>


                            </div>

                            <div class="tab-pane" id="tab_4" style="height: 460px;overflow: auto;">
                                <table id="eleInfo" class="table table-bordered table-condensed" style="margin-top: 10px;">
                                    <tbody>
                                        <tr>
                                            <th style="text-align: center;" align="center" colspan="2">电梯信息</th>
                                        </tr>

                                        <tr>
                                            <th width="40%">电梯类型</th>
                                            <td>{{typename}}</td>
                                        </tr>
                                        <tr>
                                            <th>使用单位</th>
                                            <td>{{companyname}}</td>
                                        </tr>
                                        <tr>
                                            <th>项目名称</th>
                                            <td>{{projectname}}厦</td>
                                        </tr>
                                        <tr>
                                            <th>电梯品牌</th>
                                            <td>{{brandname}}</td>
                                        </tr>
                                        <tr>
                                            <th>制造单位</th>
                                            <td>{{makecompany}}</td>
                                        </tr>
                                        <tr>
                                            <th>制造日期</th>
                                            <td>{{makeDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>安装单位</th>
                                            <td>{{installcompany}}</td>
                                        </tr>
                                        <tr>
                                            <th>载重</th>
                                            <td>{{maxload}}</td>
                                        </tr>
                                        <tr>
                                            <th>层站数</th>
                                            <td>{{floorsnumber}}</td>
                                        </tr>
                                        <tr>
                                            <th>控制方式</th>
                                            <td>{{controlmode}}</td>
                                        </tr>
                                        <tr>
                                            <th>额定速度</th>
                                            <td>{{speed}}</td>
                                        </tr>
                                        <tr>
                                            <th>出厂编号</th>
                                            <td>{{factorynumber}}</td>
                                        </tr>
                                        <tr>
                                            <th>运行方式</th>
                                            <td>{{operationmode}}</td>
                                        </tr>
                                        <tr>
                                            <th>设备型号</th>
                                            <td>{{equipmentmodel}}</td>
                                        </tr>
                                        <tr>
                                            <th>使用证编号</th>
                                            <td>{{numbercode}}</td>
                                        </tr>
                                        <tr>
                                            <th>注册代码</th>
                                            <td>{{regcode}}</td>
                                        </tr>
                                        <tr>
                                            <th>注册单位</th>
                                            <td>{{regcompany}}</td>
                                        </tr>
                                        <tr>
                                            <th style="text-align: center;" align="center" colspan="2">合同信息</th>
                                        </tr>
                                        <tr>
                                            <th>付款日期</th>
                                            <td>{{paymentDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>维保合同到期时间</th>
                                            <td>{{maintenanceEndDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>合同联系人</th>
                                            <td>{{contactperson}}</td>
                                        </tr>
                                        <tr>
                                            <th>联系电话</th>
                                            <td>{{contacttel}}</td>
                                        </tr>
                                        <tr>
                                            <th>配件约定</th>
                                            <td>{{parts}}</td>
                                        </tr>
                                        <tr>
                                            <th>税收票证</th>
                                            <td>{{taxticket}}</td>
                                        </tr>

                                        <tr>
                                            <th style="text-align: center;" align="center" colspan="2">年检信息</th>
                                        </tr>
                                        <tr>
                                            <th>检验人员</th>
                                            <td>{{checkperson}}</td>
                                        </tr>
                                        <tr>
                                            <th>检验单位</th>
                                            <td>{{checkcompany}}</td>
                                        </tr>
                                        <tr>
                                            <th>年检报告编号</th>
                                            <td>{{reportcode}}</td>
                                        </tr>
                                        <tr>
                                            <th>年检日期</th>
                                            <td>{{yearcheckDate}}</td>
                                        </tr>
                                        <tr>
                                            <th>下次年检日期</th>
                                            <td>{{nextyearcheckDate}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- <div class="tab-pane" id="tab_5" style="height: 460px;overflow: auto;padding-top: 15px">
                            <ul>
                                <li class="partsOrderBox">配件信息（0）
                                    <ul></ul>
                                </li>
                            </ul>
                        </div>-->
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</body>


<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../js/jquery.jqprint-0.3.js"></script>
<script type="text/javascript" src="../../js/myAjax.js"></script>
<script type="text/javascript" src="../../js/pub.js"></script>
<script type="text/javascript" src="../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function() {
        $ = layui.jquery; //jquery
        laydate = layui.laydate; //日期插件
        lement = layui.element; //面包导航
        laypage = layui.laypage; //分页
        layer = layui.layer; //弹出层
        var form = layui.form;
        okLoading.close($);
    });
</script>


<script>
    var recordId = getQueryVariable("recordId");
    const vm = new Vue({
        el: "#app",
        data: {
            companyname: null,
            projectname: null,
            address: null,
            addressdetail: null,
            numbercode: null,
            person: null,
            maintype: null,
            remark: null,
            timeConsuming: null,
            status: null,
            startTime: null,
            endTime: null,
            startAddress: null,
            endAddress: null,
            addressLongitude: null,
            addressLatitude: null,
            electronPhotoList: null,
            workOrderPhotoList: null,
            picturesAfterMaintenanceList: null,
            picturesBeforeMaintenanceList: null,
            programList: null,
            typename: null,
            brandname: null,
            usenumber: null,
            makecompany: null,
            makeDate: null,
            installcompany: null,
            maxload: null,
            floorsnumber: null,
            controlmode: null,
            speed: null,
            factorynumber: null,
            operationmode: null,
            equipmentmodel: null,
            regcode: null,
            regcompany: null,
            paymentDate: null,
            maintenanceEndDate: null,
            contactperson: null,
            contacttel: null,
            parts: null,
            taxticket: null,
            checkperson: null,
            checkcompany: null,
            reportcode: null,
            yearcheckDate: null,
            nextyearcheckDate: null,
            photoNum: 0,
            maintenancePhotoNum: 0,
            workOrderPhotoNum: 0,
            electronPhotoNum: 0
        },
        methods: {
            bindSrcBillAttachment(value) {
                return $baseUrl +
                    'other/viewUploadFile?id=' + value;
            },
            print() {
                $("#first_li").css("cssText", "background-color:#BEBABA!important");
                $("#print_area").jqprint({
                    debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
                    importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
                    printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
                    operaSupport: true //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
                });
            }
        },
        created() {

            let request = {
                url: 'maintenance/mainOrder/detail',
                data: {
                    userId: $userId,
                    id: recordId
                },
                method: "POST"
            }
            sendRequest(request, (res) => {
                this.companyname = res.data.elevator.company.name;
                this.projectname = res.data.elevator.project.name;
                this.address = res.data.elevator.address;
                this.numbercode = res.data.order.numbercode;
                this.programList = res.data.programList;
                this.person = res.data.personList[0];
                this.maintype = res.data.order.maintenanceType;
                this.status = res.data.order.status;
                this.remark = res.data.order.remark;
                this.timeConsuming = res.data.order.timeConsuming;
                this.startTime = res.data.order.startTime;
                this.endTime = res.data.order.endTime;
                this.startAddress = res.data.order.startAddress;
                this.endAddress = res.data.order.endAddress;
                this.addressLongitude = res.data.elevator.addressLongitude;
                this.addressLatitude = res.data.elevator.addressLatitude;
                this.addressdetail = res.data.elevator.addressdetail;
                if (res.data.order.electronPhoto != null) {
                    this.electronPhotoNum = res.data.order.electronPhoto.split(",").length;
                    this.electronPhotoList = res.data.order.electronPhoto.split(","); //电子工单照片
                }

                if (res.data.order.workOrderPhoto != null) {
                    this.workOrderPhotoNum = res.data.order.workOrderPhoto.split(",").length;
                    this.workOrderPhotoList = res.data.order.workOrderPhoto.split(","); //工单照片
                }
                var afternum = 0;
                var beforenum = 0;
                if (res.data.order.picturesAfterMaintenance != null) {
                    afternum = res.data.order.picturesAfterMaintenance.split(",").length;
                    this.picturesAfterMaintenanceList = res.data.order.picturesAfterMaintenance.split(","); //现场照片
                }
                if (res.data.order.picturesBeforeMaintenance != null) {
                    beforenum = res.data.order.picturesBeforeMaintenance.split(",").length;
                    this.picturesBeforeMaintenanceList = res.data.order.picturesBeforeMaintenance.split(","); //维修前照片
                }
                this.maintenancePhotoNum = beforenum + afternum;
                this.photoNum = this.maintenancePhotoNum + this.workOrderPhotoNum + this.electronPhotoNum;

                this.typename = res.data.elevator.type.name;
                this.brandname = res.data.elevator.brand.name;
                this.usenumber = res.data.elevator.usenumber;
                this.makecompany = res.data.elevatorParameter.makecompany;
                this.makeDate = res.data.elevatorParameter.makeDate;
                this.installcompany = res.data.elevatorParameter.installcompany;
                this.maxload = res.data.elevatorParameter.maxload;
                this.floorsnumber = res.data.elevatorParameter.floorsnumber;
                this.controlmode = res.data.elevatorParameter.controlmode;
                this.speed = res.data.elevatorParameter.speed;
                this.factorynumber = res.data.elevatorParameter.factorynumber;
                this.operationmode = res.data.elevatorParameter.operationmode;
                this.equipmentmodel = res.data.elevatorParameter.equipmentmodel;
                this.regcode = res.data.elevatorParameter.regcode;
                this.regcompany = res.data.elevatorParameter.regcompany;
                this.paymentDate = res.data.elevatorInformation.paymentDate;
                this.maintenanceEndDate = res.data.elevatorInformation.maintenanceEndDate;
                this.contactperson = res.data.elevatorInformation.contactperson;
                this.contacttel = res.data.elevatorInformation.contacttel;
                this.parts = res.data.elevatorInformation.parts;
                this.taxticket = res.data.elevatorInformation.taxticket;
                this.checkperson = res.data.elevatorInformation.checkperson;
                this.checkcompany = res.data.elevatorInformation.checkcompany;
                this.reportcode = res.data.elevatorInformation.reportcode;
                this.yearcheckDate = res.data.elevatorInformation.yearcheckDate;
                this.nextyearcheckDate = res.data.elevatorInformation.nextyearcheckDate;
            })

        },
        computed: {},



    });
</script>

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=jA0VzOF5uYehineGKLNc1FBIPGDSyO7R"></script>
<script>
    setTimeout(function() {

        var map = new BMap.Map("container");

        var addressLongitude = vm.addressLongitude;
        var addressLatitude = vm.addressLatitude;

        var point = new BMap.Point(addressLongitude, addressLatitude);


        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);

        var myIcon = new BMap.Icon("../../images/dt.png", new BMap.Size(52, 60));


        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        // 将标注添加到地图
        map.addOverlay(marker);


        var opts = {
            width: 350,
            height: 50,
            title: vm.address
        };


        var infoWindow = new BMap.InfoWindow('地址：' + vm.addressdetail, opts);

        marker.addEventListener('click', function() {
            map.openInfoWindow(infoWindow, point);
        });
    }, 1000);
</script>

<script>
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px', 550 + 'px'], // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function() {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>


</html>